<template>
    <div class = "login" v-loading="loading">
<el-col style="width:450px;">
    <el-card shadow="hover">
        <div class = "box-wrapper">
            <div class = "Head">后台管理系统</div>
                <div class = "content">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="50px"  class = "inputtwo-wrappe">
                    <el-form-item label="角色" prop = "region">
                    <el-select style="width:100%" v-model="ruleForm.region" placeholder="Please select role" >
                    <el-option label="管理员" value="admin"></el-option>
                    <el-option label="基地管理员" value="base_manager"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item  label="账号" prop="phone">
                    <el-input v-model="ruleForm.phone" placeholder="请输入账号"/>
                    </el-form-item>
                    <el-form-item label="密码" prop="phoneone">
                    <el-input type="password" v-model="ruleForm.phoneone" placeholder="请输入密码"/>
                    </el-form-item>
                    <el-form-item>
                     <el-button @click="register('ruleForm')" type="primary" style="width:100%">登录</el-button>
                    </el-form-item>
            </el-form>
            </div>
         </div>
        </el-card>
      </el-col>
    </div>
</template>
<script>
export default {
    data(){
        var region = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('角色不能为空'));
        } else {
            callback();
        }
      };
        var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('账号不能为空'));
        } else {
            callback();
        }
      };
      var checkPhonetwo = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        } else {
           callback();
        }
      };
      return{
            inputtwo:'',
            inputone:'',
            ruleForm: {
                phone: '',
                phoneone: '',
                region:'admin'
                },
             rules: {
                region: [
                    {validator: region, trigger: 'blur'}
                ],
                phone: [
                    {validator: checkPhone, trigger: 'blur'}
                ],
                phoneone:[
                    {validator: checkPhonetwo, trigger: 'blur'}
                ]
        },
        loading: false,
        api:''
        }  
    },
    created() {  //全局监听键盘事件
		var _this = this;
		document.onkeydown = function(e) {
		let key = window.event.keyCode;
		if (key == 13) {
            _this.register('ruleForm')
			}
        };
        this.apione()
    },
    methods: {
        apione(){
            this.$api.publickey.key().then(res => {
                this.api = res.data
            }).catch(err => {
                this.$message.error(err); //登录失败提示错误
            });
        },
        open1(title,content,type) {
        this.$notify({
          title: title,
          message: content,
          type: type
        });
      },
        register(formName){
           this.$refs[formName].validate((valid) => {
              if (valid) {
                // 请求后端数据
                // 加载loading动画
                this.loading = true
                // 调用main.js全局原型链上的方法进行加密
                let data = this.$getCode(this.ruleForm.phoneone,this.api)
                // 创建对象获取到自定义属性 
                let paramstwo = {
                    act:this.ruleForm.phone,
                    pwd:data,
                    role:this.ruleForm.region
                }
                // post请求发送账号密码
                this.$api.Loginlogout.login(paramstwo).then(res => {
                // 执行vuex方法储存token和用户数据
                switch(res.code){
                        case 200:
                        this.$store.dispatch('reducePrice', res.data)
                        this.loading = false
                        //登录成功之后重定向到首页
                        this.$router.push({ path: '/' });
                        this.open1('成功','欢迎回来！','success')
                        break
                        case 2000:
                        this.open1('失败','用户名或密码错误','warning')
                        this.loading = false
                        break
                        case 2001:
                        this.open1('失败','原密码不能为空','warning')
                        this.loading = false
                        break
                        case 2002:
                        this.open1('失败','解密失败','warning')
                        this.loading = false
                        break
                        case 5000:
                        this.open1('失败','第三方登录失败','warning')
                        this.loading = false
                        break
                    }
                
                }).catch(error => {
                  console.log(error)
                });
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        }
    },
}
</script>
<style scoped>
    .login{
        width:100%;
        height:100%;
        justify-content:center;
        align-items:center;
        display: flex;
        /* background: url('http://blog.gdfengshuo.com/example/work/static/img/login-bg.e213405.jpg');
        background-size:100% 100%; */
    }
    .box-wrapper .Head{
        width:100%;
        line-height: 50px;
        text-align: center;
        color:black;
        font-size:20px;
    }
    .box-wrapper .content{
        padding:20px 25px;
    }
    .box-wrapper .content .button{
        display: flex;
        justify-content:center;
        width:100%;
    }
</style>